import React, {memo} from 'react';
import SongSheetItemStyle from "./SongSheetItemStyle";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import {dateFormat} from "../../../utils/dateFormat";

/**
 * 时间 2024年1月3日 17点02分
 * 组件说明
 * 关于歌单或新碟展示的item
 * props说明
 *   coverUrl:歌曲封面路径
 *   songName：歌曲名称
 *   playedNumber: 播放量
 *    注意:传入时渲染dom,否则不进行渲染
 *   sing：歌手名称. 注意: 如果传入sing ,那么该组件将被视为新碟,其播放量不再显示,
 *      如果 playedNumber 与 sing 都进行传入时,默认将以新碟的方式进行展示
 *      注意:传入时渲染dom,否则不进行渲染
 *   size: 封面大小, 注意：我们这里的size不仅仅是控制封面的宽度和高度，
 *  也是控制整个盒子的高度，其字体和距离会相对变化
 *  isShowCover: 是否显示底部蒙版, 默认为false
 *  isAmplify: 鼠标悬停时是否扩大,默认为false
 *  releaseTime: 发布时间
 *    注意:传入时渲染dom,否则不进行渲染
 *  callbackFunc
 *  如果传入了callbackFunc那么该组件的默认单击方法将不再执行
 *
 */

type Props = {
  id?:number,
  coverUrl?:string,
  songName?:string,
  playedNumber?:number,
  sing?:string,
  size?:number,
  isShowCover?:boolean,
  isAmplify?:boolean,
  releaseTime?:string,
  className?:string,
  type?:number
  callbackFunc?:Function,
};

export default memo(function SongSheetItem(props: Props) {
  const navigate=useNavigate();
  function boxClick() {
    if (props.callbackFunc){
      props.callbackFunc(props.id);
    }else{
      navigate("/home/compositepages",{state:{type:props.type?props.type:2,id:props.id}})
    }
  }
  return (
    <SongSheetItemStyle
      $coverUrl={props.coverUrl}
      $isShowCover={props.isShowCover}
      $isAmplify={props.isAmplify}
      $size={props.size}
    >
      <div className={`song-sheet-cover ${props.className}`} onClick={boxClick}>
        <div className="song-sheet-mask">
          <span className="music-play-btn iconfont">&#xe624;</span>
        </div>
      </div>
      {/*歌曲名称dom是否渲染*/}
      {
        props.songName?
          <div className="song-sheet-name">{props.songName}</div>:""
      }
      {/*歌手dom是否渲染*/}
      {
        props.sing?
          <div className="song-sheet-sing">{props.sing}</div>:""
      }
      {/*播放量dom是否渲染*/}
      {
        props.playedNumber?
          <div className="song-sheet-palyednumber">播放量:{props.playedNumber+""}</div>:""
      }

      {/*发布日期dom是否渲染*/}
      {
        props.releaseTime?
          <div className="song-sheet-releasetime">{dateFormat(props.releaseTime)}</div>:""
      }
    </SongSheetItemStyle>
  );
});
